<template>
	<view class="reservation">
			<view class="reservation-header">
				<view class="reservation-header__title">预约买车</view>
				<view class="reservation-header__tips">请如实填写您的买车需求</view>
			</view>
			<view class="reservation-body">
				<u-form class="reservation-form" ref="uForm" :model="form" label-position="top" :label-style="labelStyle">
					<u-form-item class="reservation-form__item" label="意向车型" prop="intent_car">
						<view class="reservation-form__item-inner" v-for="(item,index) in (form.intent_car.length ? form.intent_car : [null])" :key="createDateKey()">
							<u-input class="reservation-form__input" @input="handleIntentInput(index,$event)" :value="item" type="text" placeholder="请输入或选择车型"/>
							<text class="reservation-form__button" @click="handleSelectIntent(index)">选择</text>
							<u-icon v-if="index < 1" name="plus-circle" color="#C0C4CC" @click="handleIntentIncrease"></u-icon>
							<u-icon v-else name="minus-circle" color="#C0C4CC" @click="handleIntentRemove(index)"></u-icon>
						</view>
					</u-form-item>
					<u-form-item class="reservation-form__item" label="意向颜色" prop="intent_color">
						<u-input @click="handleOpenColorPopup" :value="form.intent_color.toString()"  placeholder="请选择颜色" type="select"/>
					</u-form-item>
					<u-form-item class="reservation-form__item" label="购车预算" prop="price">
						<u-input v-model="form.price.label" placeholder="请选择预算" @click="pricePopupShow = true" type="select"/>
					</u-form-item>
					<u-form-item class="reservation-form__item" label="预期车龄" prop="car_age">
						<u-input v-model="form.car_age.label" placeholder="请选择车龄" @click="agePopupShow = true" type="select"/>
					</u-form-item>
					<u-form-item class="reservation-form__item" label="姓名" prop="name">
						<u-input v-model="form.name" placeholder="请输入您的姓名" type="text"/>
					</u-form-item>
					<u-form-item class="reservation-form__item" label="手机号码" prop="phone">
						<u-input v-model="form.phone" placeholder="请输入您的手机号码" type="number"/>
						<template #right>
							<phone-button @change="form.phone = $event"></phone-button>
						</template>
					</u-form-item>
				</u-form>
			</view>
			<u-checkbox-group class="pact-list">
				<u-checkbox v-model="readChecked1" shape="circle">
					<view class="pact-list__text">我已阅读并同意 <navigator class="pact-list__link" url="/pages/used-car/xieyi?type=0">《个人信息保护声明》</navigator></view>
				</u-checkbox>
			</u-checkbox-group>
			<view class="reservation-action">
				<button class="reservation-action__button" @click="handleSubmitForm">提交</button>
			</view>
			<u-popup v-model="colorPopupShow" mode="bottom" border-radius="15">
				<view class="popup-header">
					<view class="popup-header__cancel" @click="handleCloseColorPopup(false)">取消</view>
					<view class="popup-header__title">颜色选择</view>
					<view class="popup-header__confirm" @click="handleCloseColorPopup(true)">确认</view>
				</view>
				<view class="popup-body">
					<view class="color-list">
						<view class="color-list__item" v-for="(item,index) in colorList" :key="item">
							<button @click="handleSelectColor(item)" class="color-list__button" :class="{'color-list__button--active':colorCache.includes(item)}">{{item}}</button>
						</view>
					</view>
				</view>
			</u-popup>
			<u-popup v-model="pricePopupShow"  mode="bottom" border-radius="15">
				<view class="popup-header">
					<view class="popup-header__cancel" @click="handleClosePricePopup(false)">取消</view>
					<view class="popup-header__title">购车预算</view>
					<view class="popup-header__confirm" @click="handleClosePricePopup(true)">确认</view>
				</view>
				<view class="popup-body">
					<picker-view class="picker-view" @change="handleSelectPrice">
						<picker-view-column class="picker-view__column">
							<view class="picker-view__item" v-for="(item,index) in priceList" :key="index" :class="{'picker-view__item--active':priceCache.label === item.label}">{{item.label}}</view>
						</picker-view-column>
					</picker-view>
				</view>
			</u-popup>
			<u-popup v-model="agePopupShow"  mode="bottom" border-radius="15">
				<view class="popup-header">
					<view class="popup-header__cancel" @click="handleCloseAgePopup(false)">取消</view>
					<view class="popup-header__title">预购车龄</view>
					<view class="popup-header__confirm" @click="handleCloseAgePopup(true)">确认</view>
				</view>
				<view class="popup-body">
					<picker-view class="picker-view" @change="handleSelectAge">
						<picker-view-column class="picker-view__column">
							<view class="picker-view__item" v-for="(item,index) in ageList" :key="index" :class="{'picker-view__item--active':ageCache.label === item.label}">{{item.label}}</view>
						</picker-view-column>
					</picker-view>
				</view>
			</u-popup>
			<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {reservation} from '@/apis/used-car/api.js'
	import isEmpty from '@/utils/is-empty.js'
	import PhoneButton from '@/pages/components/public/phone-button.vue'
	export default{
		data(){
			return {
				colorPopupShow:false,
				pricePopupShow:false,
				agePopupShow:false,
				readChecked1:false,
				form:{
					intent_car:[],
					intent_color:[],
					price:{},
					car_age:{},
					name:'',
					phone:'',
				},
				rules:{
					intent_car:[
						{
							message: '请输入或选择车型',
							trigger: 'change',
							validator:(rule,value)=> value.filter(Boolean).length > 0
						}
					],
					intent_color:[
						{
							message: '请选择颜色',
							trigger: 'change',
							validator:(rule,value)=> !isEmpty(value)
						}
					],
					price:[
						{
							message: '请选择预算',
							trigger: 'change',
							validator:(rule,value)=> !isEmpty(value)
						}
					],
					car_age:[
						{
							message: '请选择车龄',
							trigger: 'change',
							validator:(rule,value)=> !isEmpty(value)
						}
					],
					name:[
						{
							required: true,
							message: '请输入您的姓名',
							trigger: 'change'
						}
					],
					phone:[
						{
							required: true,
							message: '请输入您的手机号',
							trigger: 'change'
						},
						{
							message: '手机号码格式错误',
							validator:(rule,value)=>this.$u.test.mobile(value),
							trigger: 'change'
						}
					]
				},
				colorCache:[],
				colorList:[
					'颜色不限',
					'白色',
					'黑色',
					'灰色',
					'红色',
					'金色',
					'蓝色',
					'棕色',
					'银色',
					'橙色',
					'黄色',
					'紫色',
					'绿色',
					'米色'
				],
				priceCache:{				
					label:'1万以下',
					value:'1万以下'
				},
				priceList: [
					{
						label:'1万以下',
						value:'1万以下',
					},
					{
						label:'1 ~ 3 万',
						value:'1 ~ 3',
					},
					{
						label:'3 ~ 5 万',
						value:'3 ~ 5',
					},
					{
						label:'5 ~ 8 万',
						value:'5 ~ 8',
					},
					{
						label:'8 ~ 10 万',
						value:'8 ~ 10',
					},
					{
						label:'10 ~ 15 万',
						value:'10 ~ 15',
					},
					{
						label:'15 ~ 20 万',
						value:'15 ~ 20',
					},
					{
						label:'20 ~ 30 万',
						value:'20 ~ 30',
					},
					{
						label:'30 ~ 50 万',
						value:'30 ~ 50',
					},
					{
						label:'50 万以上',
						value:'50 万以上',
					}
				],
				ageCache:{
					label:'3 年以下',
					value:'3 年以下',
				},
				ageList:[
					{
						label:'3 年以下',
						value:'3 年以下',
					},
					{
						label:'3 ~ 5 年',
						value:'3 ~ 5'
					},
					{
						label:'5 ~ 10 年',
						value:'5 ~ 10',
					},
					{
						label:'其他年份',
						value:'其他年份'
					}
				]
			}
		},
		components:{
			PhoneButton
		},
		computed:{
			labelStyle(){
				return {
					color:'#333333',
					fontSize:'28rpx',
					fontWeight:'bold'
				}
			},
			portrait(){
				return uni.getStorageSync('userInfo').avatarUrl
			},
			uid(){
				return uni.getStorageSync('userId')
			}
		},
		methods:{
			createDateKey(){
				return + new Date()
			},
			handleSelectIntent(index){
				uni.$once('intent-change',e =>{
					this.form.intent_car.splice(index,1, e.full_name)
				})
				uni.navigateTo({url: '/pages/used-car/allCarList'})
			},
			handleIntentInput(index,value){
				this.form.intent_car.splice(index,1,value)
			},
			handleIntentIncrease(){
				this.form.intent_car.push(null)
			},
			handleIntentRemove(index){
				this.form.intent_car.splice(index,1)
			},
			handleSelectColor(value){
				if(value === '颜色不限'){
					this.colorCache = [value]
				}else{
					const list = this.colorCache.filter(item=>item !=='颜色不限')
					this.colorCache = list.includes(value) ? list.filter(item=>item !== value):[...list,value]
				}
			},
			
			handleOpenColorPopup(){
				this.colorPopupShow = true
			},
			handleCloseColorPopup(confirm){
				if(confirm){
					this.form.intent_color = this.colorCache
				}else{
					this.colorCache = []
				}
				this.colorPopupShow = false
			},
			handleSelectPrice({detail}){
				this.priceCache = this.priceList.find((item,index)=>index === detail.value[0])
			},
			handleClosePricePopup(confirm){
				if(confirm){
					this.form.price = this.priceCache
				}
				this.pricePopupShow = false
			},
			handleSelectAge({detail}){
					this.ageCache = this.ageList.find((item,index)=>index === detail.value[0])
			},
			handleCloseAgePopup(confirm){
				if(confirm){
					this.form.car_age = this.ageCache
				}
				this.agePopupShow = false
			},
			handleSubmitForm(){
				this.$refs.uForm.validate(async valid =>{
					if(valid){
						if(this.readChecked1){
							try{
								const {code,data,msg} = await reservation({
									intent_car:this.form.intent_car.toString(),
									intent_color:this.form.intent_color.toString(),
									price:this.form.price.value,
									car_age:this.form.car_age.value,
									name:this.form.name,
									phone:this.form.phone,
									portrait:this.portrait,
									uid:this.uid
								})
								if(code===1){
									this.$refs.uToast.show({	title: '预约成功！',type: 'success',url:'/pages/used-car',isTab:true})
								}else{
									this.$refs.uToast.show({	title: msg,type: 'error'})
								}
							}catch(e){
								this.$refs.uToast.show({	title: e.message,type: 'error'})
							}
						}else{
							this.$refs.uToast.show({title: '请先阅读协议并同意',type:'warning'})
						}
					}
				})
			}
		},
		
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		onLoad(){
			this.form.phone = uni.getStorageSync('phone')
		}
	}
</script>

<style lang="scss">
	.picker-view{
		height: 500rpx;
		&__item{
			display: flex;
			align-items: center;
			justify-content: center;
			transition: color .3s, font-size .3s;
			&--active{
				color: #0083F0;
				font-size: 36rpx;
			}
		}
	}
	.u-form-item{
		padding-left: 50rpx !important;
		position: relative;
		&::before{
			content: '';
			position: absolute;
			left: 0;
			top: 40rpx;
			width: 10rpx;
			height: 30rpx;
			background-color: #0083F0;
		}
	}
	.reservation{
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.reservation-header{
		background-color: #0083f0;
		height: 375rpx;
		padding: 0 74rpx;
		background-image: url('http://cdn1.cheyizhuan.com/sell_car_bg.png-t.m98xx');
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size: contain;
		&__title{
			font-size: 45rpx;
			font-weight: bold;
			color: #FFFFFF;
			display: block;
			padding-top: 60rpx;
		}
		&__tips{
			font-size: 28rpx;
			color: #c8e5fe;
			margin-top: 22rpx;
		}
	}
	.reservation-body{
		flex: 1;
		margin: 0 40rpx 40rpx;
		padding: 0 30rpx 30rpx;
		box-shadow: 20rpx 0 10rpx -20rpx rgba(0,68,124,0.1), -20rpx 0 10rpx -20rpx rgba(0,68,124,0.1), 0 20rpx 10rpx -20rpx rgba(0,68,124,0.1);
	}
	.reservation-form{
		&__item-inner{
			display: flex;
			justify-content: space-between;
		}
		&__input{
			flex: 1;
		}
		&__button{
			color: #0083F0;
			margin: 0 30rpx;
		}
	}
	.popup-header{
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		box-shadow: 0 1rpx 0.5rpx -1rpx #CCCCCC;
		&__cancel{
			font-size: 28rpx;
			color: #626262;
			font-weight: 300;
		}
		&__title{
			font-size: 30rpx;
			color: #333333;
			font-weight: 400;
		}
		&__confirm{
			font-size: 28rpx;
			color: #0083F0;
			font-weight: 300;
		}
	}
	.popup-body{
		padding: 20rpx;
	}
	.color-list{
		display: flex;
		flex-wrap: wrap;
		&__item{
			width: 25%;
			padding: 20rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		&__button{
			width: 150rpx;
			height: 60rpx;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 22rpx;
			font-weight: 400;
			color: #626262;
			background-color: #FFFFFF;
			margin: 0;
			&--active{
				background-color: #0083F0;
				color: #FFFFFF;
			}
		}
	}
	.reservation-action{
		height: 128rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 -20rpx 10rpx -20rpx rgba(0,68,124,0.1);
		&__button{
			width: 678rpx;
			height: 72rpx;
			background-color: #0083F0;
			color: #FFFFFF;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.pact-list{
		padding: 0 40rpx;
		margin-bottom: 40rpx;
		&__text{
			display: flex;
			font-size: 24rpx;
			color: #808080;
		}
		&__link{
			color: #0083F0;
		}
	}
</style>
